$(function () {
    var orderAmountChart;
    echart_2();
    echart_map();

    getHourlyOrder();
    setInterval(function () {
        getHourlyOrder();
    }, 60000);
    
    function getHourlyOrder() {
        $.ajax({
            type: "get",
            url: '/data/getOrderAmount',
            success: function (data) {
                var today = data.today || [];
                var yesterday = data.yesterday || [];
                if(orderAmountChart) {
                    var hours = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
                    var todayOrders = [], yesterdayOrders = [];
                    for(var i = 0; i < hours.length; i++) {
                        var td = today.filter(function (value) { return value.hour === hours[i] })[0];
                        if(td) {
                            todayOrders.push(Number(td.orderAmount || 0).toFixed(2));
                        }else {
                            todayOrders.push(0);
                        }

                        var yd = yesterday.filter(function (value) { return value.hour === hours[i] })[0];
                        if(yd) {
                            yesterdayOrders.push(Number(yd.orderAmount || 0).toFixed(2));
                        }else {
                            yesterdayOrders.push(0);
                        }
                    }

                    orderAmountChart.setOption({
                        series: [
                            {
                                data: yesterdayOrders
                            },
                            {
                                data: todayOrders
                            }
                        ]
                    })
                }
            }
        });
    }

    function echart_2() {
        orderAmountChart = echarts.init(document.getElementById('chart_2'));
        orderAmountChart.clear();
        option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['昨天','今天'],
                textStyle:{
                    color: '#fff'
                },
                top: '8%'
            },
            grid: {
                top: '40%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            color: ['#990652','#1AD5D7'],
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            },
            yAxis: {
                name: '',
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            },
            series: [
                {
                    name:'昨天',
                    type:'line',
                    areaStyle: {},
                    data:[]
                },
                {
                    name:'今天',
                    type:'line',
                    data:[]
                }
            ]
        };
        orderAmountChart.setOption(option);
        window.addEventListener("resize", function () {
            orderAmountChart.resize();
        });
    }

    var chinaMapChart;
    var GZData = [];
    var geoCoordMap = {
        '山东':[117.000923, 36.675807],
        '河北':[115.48333,38.03333],
        '吉林':[125.35000,43.88333],
        '黑龙江':[127.63333,47.75000],
        '辽宁':[123.38333,41.80000],
        '内蒙古':[111.670801, 41.818311],
        '新疆':[87.68333,43.76667],
        '甘肃':[103.73333,36.03333],
        '宁夏':[106.26667,37.46667],
        '山西':[112.53333,37.86667],
        '陕西':[108.95000,34.26667],
        '河南':[113.65000,34.76667],
        '安徽':[117.283042, 31.86119],
        '江苏':[119.78333,32.05000],
        '浙江':[120.20000,30.26667],
        '福建':[118.30000,26.08333],
        '广东':[113.23333,23.16667],
        '江西':[115.90000,28.68333],
        '海南':[110.35000,20.01667],
        '广西':[108.320004, 22.82402],
        '贵州':[106.71667,26.56667],
        '湖南':[113.00000,28.21667],
        '湖北':[114.298572, 30.584355],
        '四川':[104.06667,30.66667],
        '云南':[102.73333,25.05000],
        '西藏':[91.00000,30.60000],
        '青海':[96.75000,36.56667],
        '天津':[117.20000,39.13333],
        '上海':[121.55333,31.20000],
        '重庆':[106.45000, 29.56667],
        '北京': [116.41667,39.91667],
        '台湾': [121.30, 25.03],
        '香港': [114.10000,22.20000],
        '澳门': [113.50000,22.20000],
        '南海诸岛':[112.349537,16.839991]
    };
    var init = true;
    function getPayAmountByArea() {
        $.ajax({
            type: "get",
            url: "/data/getPayAmountByArea",
            success: function (data) {
                var changeProvince = [];
                data.sort(function (a, b) {
                    return b.payAmount - a.payAmount;
                });

                var top = [];
                for(var i = 0; i < data.length; i++) {

                    if(top.length < 5) {
                        top.push(data[i]);
                    }

                    if(init) {
                        GZData.push(data[i])
                        if(data[i].payAmount > 0) {
                            changeProvince.push(data[i]);
                        }
                    }else {
                        var oldData = GZData.filter(function (value) {
                            return value.provinceCode === data[i].provinceCode;
                        })[0];

                        if (oldData && oldData.payAmount !== data[i].payAmount) {
                            oldData.payAmount = data[i].payAmount;
                            changeProvince.push(data[i]);
                        }
                    }
                }

                if(init && GZData.length > 0) {
                    init = false
                }

                var series = chinaMapChart.getOption().series;
                var line = [], point = [];
                if(changeProvince.length > 0) {
                    line = changeProvince.map(function (value) {
                        return {
                            fromName: value.province,
                            toName: '科技公司',
                            coords: [geoCoordMap[value.province], [113.344995,23.182361]],
                            amount: value.payAmount
                        };
                    });
                }else {
                    line = series[0].data;
                }

                point = line.map(function (value) {
                    return {
                        name: value.fromName,
                        value: geoCoordMap[value.fromName].concat(40),
                        amount: value.amount
                    }
                });

                for(var k = 0; k < top.length; k++) {
                    var exists = point.filter(function (value) {
                        return value.name === top[k].province;
                    })[0];
                    if(exists) {
                        exists.value[2] = 80;
                    }else {
                        point.push({
                            name: top[k].province,
                            value: geoCoordMap[top[k].province].concat(80),
                            amount: top[k].payAmount
                        });
                    }
                }

                chinaMapChart.setOption({
                    series: [
                        {
                            data: line
                        },
                        {
                            data: point
                        }
                    ]
                });
            }
        });
    }

    getPayAmountByArea();
    setInterval(function () {
        getPayAmountByArea();
    }, 5000);

    // echart_map中国地图
    function echart_map() {
        // 基于准备好的dom，初始化echarts实例
        chinaMapChart = echarts.init(document.getElementById('chart_map'));

        var mapName = 'china'
        var data = []
        var toolTipData = [];

        /*获取地图数据*/
        chinaMapChart.showLoading();
        var mapFeatures = echarts.getMap(mapName).geoJson.features;
        chinaMapChart.hideLoading();

        var color = ['#c5f80e'];
        var series = [];
        [
            [GZData]
        ].forEach(function (item, i) {
            series.push({
                name: item[0],
                type: 'lines',
                zlevel: 2,
                    symbol: ['none', 'arrow'],
                symbolSize: 10,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: 'arrow',
                    symbolSize: 5
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data: []
            }, {
                name: item[0],
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function (val) {
                    return val[2] / 8;
                },
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                },
                data: []
            });
        });

        option = {
            tooltip: {
                trigger: 'item',
                formatter: function (param) {
                    console.log(param);
                    if(param.seriesType === "lines") {
                        return param.data.fromName + " - " + param.data.toName;
                    }else {
                        return param.name + "<br />" + "订单金额：￥" + param.data.amount;
                    }
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(147, 235, 248, 1)',
                        borderWidth: 1,
                        areaColor: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(47,79,79, .1)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(128, 217, 248, 1)',
                        // shadowColor: 'rgba(255, 255, 255, 1)',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10
                    },
                    emphasis: {
                        areaColor: '#389BB7',
                        borderWidth: 0
                    }
                }
            },
            series: series
        };

        // 使用刚指定的配置项和数据显示图表。
        chinaMapChart.setOption(option);
        window.addEventListener("resize", function () {
            chinaMapChart.resize();
        });

    }
});